{include file="public/account_head"}
<div class="pub_wid perfect_cont bgb" id="perfectAdd" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <div class="message widthauto radius">
        <h6>货主企业</h6>
        <h5>公司基础信息</h5>
        <ul class="att_box widthauto">
            <li><span class="img">企业LOGO：</span>
                <img style="width: 160px;height: 80px" v-bind:src="imageUrl" />
                <div class="fileInput left">
                    <input ref="inputer" type="file" name="upfile" id="upfile" @change="changepic()" class="upfile" accept="image/png, image/jpeg, image/gif, image/jpg" />
                    <!--                    <button class="upFileBtn" for="upfile" type="button" ></button>-->
                    <label style="display: inline-block" for="upfile" class="upFileBtn">点击上传</label>
                </div>
                <i>尺寸：400px*200px，大小不超过500kb</i></li>
            <li>
                <span>公司名称：</span>
                <input v-model="memberInfo.name" name="name" type="text"  class="bai" placeholder="请输入公司名称"/>
            </li>
            <li>
                <span>注册时间：</span>
                <input readonly  autoComplete="off"  name="company_time" type="text" id="company_time" class="five" placeholder="请选择日期"/>
            </li>
            <li>
                <span>注册资本：</span>
                <input v-model="memberInfo.fund" name="fund" type="text" class="five" placeholder="请输入金额"/>
                万元</li>
            <li id="distpicker">
                <span>所在地：</span>
                <select v-model="province" class="five" :data-province="province">
                    <!--                    <option>请选择省</option>-->
                </select>
                <select v-model="city" class="five" :data-city="city">
                    <!--                    <option>请选择市</option>-->
                </select>
                <select v-model="district" class="five" :data-district="district">
                    <!--                    <option>请选择市</option>-->
                </select>
            </li>
            <li><span>详细地址：</span>
                <input v-model="memberInfo.home_address" name="home_address" type="text" class="bai" placeholder="请输入公司地址"/>
            </li>
            <li><span>官网地址：</span>
                <input v-model="memberInfo.website_url" name="website_url" type="text"  class="bai" placeholder="请输入公司官方网址"/>
            </li>
            <li><span>公司简介：</span>
                <textarea v-model="memberInfo.company_info" name="company_info" cols="" rows="" placeholder="请输入公司简介内容"></textarea>
            </li>
        </ul>
        <h5>联系方式</h5>
        <ul class="att_box widthauto">
            <li><span>联系人：</span>
                <input v-model="memberInfo.contacts" name="contacts" type="text" class="bai" placeholder="请输入联系人姓名"/>
            </li>
            <li><span>职位：</span>
                <input v-model="memberInfo.position" name="position" type="text" class="bai" placeholder="请输入联系人职位"/>
            </li>
            <li><span>固定电话：</span>
                <input v-model="memberInfo.landine_phone" name="landine_phone" type="text" class="bai" placeholder="请输入固定电话号码"/>
            </li>
            <li><span>手机号码：</span>
                <input v-model="memberInfo.mobile" name="mobile" type="text" class="bai" placeholder="请输入手机号码"/>
            </li>
            <li><span>邮箱地址：</span>
                <input v-model="memberInfo.email" name="email" type="text" class="bai" placeholder="请输入邮箱地址"/>
            </li>
            <li><span>微信号：</span>
                <input v-model="memberInfo.wechat" name="wechat" type="text" class="bai" placeholder="请输入联系人微信号"/>
            </li>
        </ul>
        <h5>其他信息</h5>
        <ul class="att_box widthauto">
            <li><span>所属行业：</span>
                <select v-model="supplement.trade_name" class="five">
                    <option value="">请选择所属行业</option>
                    <option v-for="item in tradeChildList" :value="item.name">{{item.name}}</option>
                </select>
            </li>
            <li><span>预算金额：</span>
                <input v-model="supplement.budget" name="budget" type="text" class="five"  placeholder="请输入预算金额"/>
                万元/年</li>
            <li><span>发货量：</span>
                <input v-model="supplement.shipment" name="shipment" type="text" class="five" placeholder="请输入发货量"/>
                吨/年</li>
            <li><span>主要路线：</span>
                <textarea v-model="supplement.line" name="line" cols="" rows="" placeholder="例：北京-沈阳、郑州-新疆、南京-北京"></textarea>
            </li>
            <li><span>服务要求：</span>
                <textarea v-model="supplement.service_content" name="service_content" cols="" rows="" placeholder="例：（1）公司运营，提供发票
      （2）行业资质，道路运输证、大件运输证等
      （3）其他资质"></textarea>
            </li>
        </ul>
        <div class="submit"><a href="/index/consignor/index" class="lf">返回</a><a @click="postData()" class="rg cur">提交审核</a></div>
    </div>
</div>
{include file="public/account_footer"}
<!--全国省份-->
<script src="/static/util/distpicker/distpicker.min.js"></script>
<!--时间组件-->
<script src="/static/util/laydate/laydate.js"></script>
<script>
    $(document).ready(function(){
        // $('#target').distpicker();
        // laydate.render({
        //     elem: '#company_time', //指定元素
        // });
    })

    var vmPerfectAdd = new Vue({
        el:'#perfectAdd',
        data:{
            id:'',
            member_category:1,
            tradeChildList:[],
            province:'',//省份
            city:'',//市
            district:'',//区或者县
            company_time:'',
            memberPhone:'',
            memberInfo:{
            },
            supplement:{

            },
            imageUrl:'/static/index/public/images/default.jpg'
        },
        computed:{
            //计算属性 生成公司所在地
            address:{
                get:function () {
                    return this.province+','+this.city+','+this.district
                },
                set: function (newValue) {
                    var valueArray = []
                    valueArray = newValue.split(',');
                    console.log(valueArray[1])
                    this.province = valueArray[0]
                    this.city = valueArray[1]
                    this.district = valueArray[2]

                    $('#distpicker').distpicker({
                        province: this.province,
                        city: this.city,
                        district: this.district
                    });
                }
            }
        },
        methods:{
            getMemberAllInfo:function () {
                var el = this;
                var postData = {
                    'id':el.id,
                }
                AjaxPost(postData,'/index/member/getMemberConsignorById').then((response)=>{
                    console.log(response)
                    var member = response.result
                    var memberInfo = member.memberInfo
                    var supplement = member.consignorReplenish
                    el.member = member
                    if(memberInfo != null){
                        el.memberInfo = memberInfo
                        el.address = memberInfo.address
                        laydate.render({
                            elem: '#company_time', //指定元素
                            value:memberInfo.company_time
                        });
                        if(memberInfo.logo!=''){
                            el.imageUrl = memberInfo.logo
                        }

                    }
                    if(supplement != null){
                        el.supplement = supplement
                    }

                    el.show = true
                })
            },
            getTradeChildList:function(){
                var el = this
                var postData = {
                    "trade_id":el.member_category
                }
                AjaxPost(postData,'/index/trade/getTradeChildByWhere').then((response=>{
                    if(response.status==1){
                        el.tradeChildList = response.result
                    }
                }))
            },
            changepic:function(){
                var el = this;
                var inputDOM = el.$refs.inputer;
                var files = inputDOM.files;
                var formData = new FormData();
                formData.append('files',files[0]);
                AjaxPost(formData,'/index/image/upload').then((response=>{
                    if(response.status==1){
                        $.customToastr('success',response.message)
                        this.imageUrl = response.result
                    }
                    console.log(response);
                }))
            },
            postData:function () {
                var memberInfo = {
                    ...this.memberInfo,
                    'logo':this.imageUrl,
                    'address':this.address,
                    'status':0,
                    'member_category':this.member_category
                }
                AjaxPost({'phone':this.memberPhone,"memberInfo":memberInfo,"supplement":this.supplement},'/index/member/addMemberInfo').then((response=>{
                    if(response.status==1){
                        localStorage.setItem('member_status','0')
                        window.location.href='/index/member/auditLoading'
                    }
                }))
            }
        },
        mounted(){
            var el = this;
            el.memberPhone = localStorage.getItem("memberPhone")
            el.id = localStorage.getItem("memberId")
            if(localStorage.getItem("member_category")){
                el.member_category = localStorage.getItem("member_category")
                el.getMemberAllInfo();
            }
            console.log(el.memberPhone)
            laydate.render({
                elem: '#company_time', //指定元素
                done: function (value,date,endDate) {
                    el.memberInfo.company_time =value
                }
            });
            this.$nextTick(function () {
                this.getTradeChildList()
            })
        }
    })
</script>
